<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="author" content="lijinbo" />
    <meta name="cdnload" content="jquery" />
    <title>063-横向滚动</title>
    <style>
      .box {
        width: 100px;
        height: 100px;
        margin-right: 16px;
        border: 1px solid rgb(189, 71, 71);
      }

      /* 1.flex */
      #roll_max {
        width: 400px;
        border: 1px solid #999;
        margin: 14px;
        display: flex;
        overflow-x: scroll;
      }

      #roll_max .content {
        display: flex;
      }

      /* 2.inlne-block */
      #roll_max2 {
        width: 400px;
        border: 1px solid #999;
        margin: 14px;
        overflow-x: scroll;
      }

      #roll_max2 .content {
        white-space: nowrap;
      }

      #roll_max2 .content .box {
        display: inline-block;
      }

      /* 3.inlne-block 无二级容器 */
      #roll_max3 {
        width: 400px;
        border: 1px solid #999;
        margin: 14px;
        overflow-x: scroll;
        white-space: nowrap;
      }

      #roll_max3 .box {
        display: inline-block;
      }
    </style>
  </head>

  <body>
    <p>
      <a href="https://better-scroll.github.io/docs/zh-CN/guide/base-scroll.html" target="_blank">
        成熟的移动端滚动库 BetterScroll
      </a>
      <br />
      <a href="https://better-scroll.github.io/examples/#/"> BetterScroll demo 合集 </a>
    </p>
    <hr />
    <button onclick="roll(-1)">向左滚动</button>
    <button onclick="roll(1)">向右滚动</button>
    <p>1.flex</p>
    <div id="roll_max" class="roll">
      <div class="content"></div>
    </div>

    <p>2.inlne-block</p>
    <div id="roll_max2" class="roll">
      <div class="content"></div>
    </div>

    <p>3.inlne-block 不加二级容器</p>
    <div id="roll_max3" class="roll content"></div>
    <script>
      var $content = $('.content')
      for (var i = 0; i < 10; i++) {
        $content.append(`<div class="box">${i + 1}</div>`)
      }

      function roll(type) {
        $('.roll').each((index, item) => {
          item.scrollLeft += type * 100
        })
      }
    </script>
  </body>
</html>
